<template>
	<view class="content">
		<Header></Header>
		<view class='home-tabs'>
			<u-tabs 
				:list="topBar" 
				@change="changeTabs" 
				:current='current'
				:inactiveStyle="{
					color: '#AAAAAA'
				}"
				:activeStyle="{
					color: '#333333',
					fontWeight: 'bold',
					fontSize: '29rpx'
				}"
			></u-tabs>
		</view>
		<view class='home-swiper'>
			<swiper :duration="500" :current='current' @change='changeSwiper' :style="'height:'+swiperHeight+'px;'">
				<swiper-item v-for='(item,index) in topBar' :key='index'>
					<scroll-view scroll-y="true" :style="'height:'+swiperHeight+'px;'">
						<component :is='activeCom' v-if='index==current'></component>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import Header from '@/components/common/Header.vue'
import Recommend from '@/components/home/recommend.vue'
import Free from '@/components/home/free.vue'
import ActualCombat from '@/components/home/actualCombat.vue'
export default{
	data () {
		return {
			swiperHeight:0,
			current:0,
			topBar: [{
				name: '今日推荐',
			}, {
				name: '免费课程',
			}, {
				name: '实战课程'
			}],
			activeCom:Recommend
		}
	},
	onReady() {
		let searchHeight = 0;
		let tabsHeight = 0;
		//header-search高度
		let searchView = uni.createSelectorQuery().select('.header-search');
		searchView.boundingClientRect(data=>{
			searchHeight = data.height;
		}).exec();
		//home-tabs高度
		let tabsView = uni.createSelectorQuery().select('.home-tabs');
		tabsView.boundingClientRect(data=>{
			tabsHeight = data.height;
		}).exec();
		
		let that = this;
		uni.getSystemInfo({
			success( res ) {
				that.swiperHeight = res.windowHeight - searchHeight - tabsHeight;
			}
		})
	},
	methods:{
		//切换tabs
		changeTabs( {index} ){
			this.current = index;
			this.tabsCom( index );
		},
		//切换swiper
		changeSwiper( e ){
			this.current = e.detail.current;
			this.tabsCom( e.detail.current );
		},
		//判断动态组件显示
		tabsCom( index ){
			switch( index ){
				case 0:
					this.activeCom = Recommend;
				break;
				case 1:
					this.activeCom = Free;
				break;
				case 2:
					this.activeCom = ActualCombat;
				break;
			}
		}
	},
	components:{
		Header,
		Recommend,
		Free,
		ActualCombat
	}
}
</script>

<style>
/deep/ .u-tabs__wrapper__nav__item__text{
	font-size: 29rpx;
	font-weight: 400;
}
/deep/ ::-webkit-scrollbar {
	display: block;
	width: 0px !important;
	height: 0px !important;
}
</style>